<template>
  <div class="luck-draw-prize" v-show="isShow">
    <!-- 未中奖 -->
    <div class="luck-draw-prize-not-win" v-if="info.is_win == 0">
      <img src="https://img.wifenxiao.com/h5-wfx/images/activity/not_win.png" alt="">
      <p>很遗憾你未中奖</p>
    </div>
    <!-- 中奖信息 -->
    <div class="luck-draw-prize-info" v-else>
      <div class="luck-draw-prize-level">恭喜您抽中{{prize_info.prize_level_name}}</div>
      <!-- 商品 -->
      <div class="luck-draw-prize-img" v-if="prize_info.type == 1">
        <img :src="prize_info.prize_pic.img_path" alt="">
      </div>
      <!-- 优惠券 -->
      <div class="luck-draw-prize-coupon"  v-else>
        <div class="luck-draw-prize-coupon-left" v-if="prize_info.promotion_type==0" v-html="scaleGoodsPriceFn(prize_info.name_value)"></div>
        <div class="luck-draw-prize-coupon-left" v-else>{{prize_info.name_value}}</div>
        <div class="luck-draw-prize-coupon-right">
          <p>{{prize_info.name}}</p>
          <p>{{prize_info.use_time}}</p>
        </div>
      </div>
      <div class="luck-draw-prize-info">
        {{prize_info.name}} <span>x{{prize_info.num}}</span>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btn-box">
      <van-button v-if="info.is_win == 1 && info.is_expire == 0 && info.is_send != 1" class="btn" color="#CA4145" @click="getLuckDraw" round type="info">领取奖品</van-button>
      <van-button v-if="info.is_win == 1 && info.is_expire == 1" class="btn" color="linear-gradient(to right, #C8C8C8, #A7A7A7)" round type="info">超时未领取</van-button>
      <van-button v-if="info.is_win == 1 && info.is_send == 1" class="btn" color="linear-gradient(to right, #C8C8C8, #A7A7A7)" round type="info">奖品已领取</van-button>
      <van-button v-if="info.is_win == 0" class="btn" color="#CA4145" @click="toHome" round type="info">逛一逛</van-button>
    </div>
    <!-- 中奖名单 -->
    <div class="prize-box">
      <div class="prize-box-title">
        <i class="left"></i>
        <span>中奖名单</span>
        <i class="right"></i>
      </div>
      <div class="prize-box-content">
        <div class="prize-box-content-th">
          <span>序号</span>
          <span>昵称</span>
          <span>奖项</span>
        </div>
        <van-list
            class="info-detail-list"
            v-model="loading"
            :finished="finished"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            finished-text=""
            @load="onLoad"
          >
            <div class="prize-box-content-tr" v-for="(item, index) in lists" :key="index">
              <span>{{item.number}}</span>
              <span class="prize-box-content-tr-img">
                <img :src="item.head_img" alt="">
                {{item.user_id}}
              </span>
              <span>{{item.prize_level}}</span>
            </div>
          </van-list>
      </div>
    </div>
    <!-- 中奖信息弹层 -->
    <win-info-popup v-if="info.is_send != 1" ref="winInfoPopup" :info="info" :prize_info="prize_info"></win-info-popup>
  </div>
</template>

<script>
import { getWinPrizeInfo, receiveLuckDraw } from '@/api/activity/activityApi'
import { scaleGoodsPrice } from '@/utils/index'
import winInfoPopup from './winInfoPopup'
import Vue from 'vue'
import { openPage } from '@/utils/utils'

export default Vue.extend({ 
  components: {
    winInfoPopup
  },
  data() {
    return {
      isShow: false,
      p: 2,
      error: false,
      loading: false,
      finished: false,
      activity_id: '',
      info: {},
      prize_info: {},
      lists: []
    }
  },
  methods: {
    toHome(){
      this.$JumpName(this,'index')
    },
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    getWinPrizeInfo() {
      const params = {
        activity_id: this.activity_id
      }
      this.$loadingWrap.show()
      getWinPrizeInfo(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.isShow = true
          this.info = res.data.info
          this.prize_info = this.info.prize_info
          this.lists = res.data.list
          this.$refs.winInfoPopup.showprizePop = true
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad() {
      const params = {
        activity_id: this.activity_id,
        p: this.p
      }

      getWinPrizeInfo(params)
        .then(res => {
          this.loading = false
          if (res.data.list.length) {
            this.lists = this.lists.concat(res.data.list)
            this.p++
          }
          if (res.data.list.length < 10) {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    getLuckDraw() {
      const params = {
        activity_id: this.activity_id
      }
      this.$loadingWrap.show()
      receiveLuckDraw(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (res.data.type == 'item') {
            openPage(res.data.link)
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    const query = this.$route.query
    this.activity_id = query.activity_id
    this.getWinPrizeInfo()
  },
  beforeCreate() {
    $('body').addClass('luck-draw-bg')
  },
  destroyed() {
    $('body').removeClass('luck-draw-bg')
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.luck-draw-bg{
  background: #FEC7C2;
}
.luck-draw-prize{
  padding: 22px 32px;
  .luck-draw-prize-not-win{
    text-align: center;
    img{
      width: 320px;
    }
    p{
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      padding: 30px 0 20px;
      color: #CA4145;
    }
  }
  .luck-draw-prize-info{
    background: #FEECEA;
    border-radius: 16px;
    .luck-draw-prize-level{
      color: #CA4145;
      font-size: 36px;
      font-weight: 500;
      line-height: 50px;
      text-align: center;
      padding: 28px 0 24px;
    }
    .luck-draw-prize-img{
      border-radius: 12px;
      overflow: hidden;
      margin: 0 22px;
      img{
        width: 100%;
      }
    }
    .luck-draw-prize-coupon{
      margin: 0 22px;
      display: flex;
      height: 132px;
      background: url('https://img.wifenxiao.com/h5-wfx/images/activity/prize_coupon.png') center/cover no-repeat;
      .luck-draw-prize-coupon-left{
        width: 206px;
        text-align: center;
        line-height: 130px;
        white-space: nowrap;
        color: #9D521B;
        font-size: 28px;
        font-weight: bold;
        @include showEllipsis;
        span{
          &.unit{
            color: #9D521B;
            font-size: 30px;
          }
          &.num-font{
            color: #B26616;
            font-size: 48px;
          }
          &.num-back{
            color: #B26616;
            font-size: 30px;
          }
        }
      }
      .luck-draw-prize-coupon-right{
        padding-left: 50px;
        width:calc(100% - 206px);
        padding-top: 26px;
        p{
          &:first-child{
            font-size: 28px;
            font-weight: 500;
            color: #A24F23;
            line-height: 40px;
            @include showEllipsis;
            margin-bottom: 6px;
          }
          &:last-child{
            font-size: 24px;
            color: #AC5925;
            line-height: 34px;
            @include showEllipsis;
          }
        }
      }
    }
    .luck-draw-prize-info{
      @include showEllipsis;
      font-size: 28px;
      line-height: 76px;
      padding-right: 100px;
      position: relative;
      color: #666;
      padding: 0 22px;
      span{
        position: absolute;
        right: 22px;
        top:50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: #333;
      }
    }
  }
  .btn-box{
    padding: 22px 0;
    .btn{
      height: 80px;
      font-size: 32px;
      width: 100%;
    }
  }
  .prize-box-title{
    display: flex;
    justify-content:center;
    align-items: center;
    padding: 26px 0;
    i{
      display: block;
      width: 92px;
      height: 20px;
      background: url('https://img.wifenxiao.com/h5-wfx/images/activity/prize_title.png') center/cover no-repeat;
      &.right{
        transform: rotate(180deg);
      }
    }
    span{
      font-size: 36px;
      font-weight: 500;
      color: #CA4145;
      margin: 0 24px;
    }
  }
  .prize-box-content{
    border-color:  #FEECEA;
    border-style: solid;
    border-width: 18px 13px;
    background: #fff;
    padding: 8px;
    border-radius: 16px;
    .prize-box-content-th{
      line-height: 60px;
      display: flex;
      font-size: 22px;
      font-weight: 500;
      color: #D42334;
      background: #FFD0D0;
      span{
        &:first-child{
          width: 124px;
          border-right: 3px solid #fff;
          text-align: center;
        }
        &:nth-of-type(2){
          flex: 1;
          padding-left: 50px;
        }
        &:last-child{
          width: 230px;
          border-left: 3px solid #fff;
          text-align: center;
        }
      }
    }
    .prize-box-content-tr{
      line-height: 60px;
      display: flex;
      font-size: 24px;
      color: #757474;
      &:nth-of-type(even){
        background: #FFEBEB;
      }
      &:nth-of-type(odd){
        background: #FFF7F7;
      }
      span{
        &:first-child{
          width: 124px;
          border-right: 3px solid #fff;
          text-align: center;
        }
        &.prize-box-content-tr-img{>
          img{
            width: 44px;
            height: 44px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 8px;
          }
          flex: 1;
          padding-left: 50px;
          @include showEllipsis;
        }
        &:last-child{
          width: 230px;
          border-left: 3px solid #fff;
          text-align: center;
          @include showEllipsis;
        }
      }
    }
  }
}
</style>